<!--
 * @Date: 2023-08-25 20:26:53
 * @LastEditors: 景冰川 961166897@qq.com
 * @LastEditTime: 2023-09-07 16:52:56
 * @FilePath: \part-cloud-appd:\project\company\veteran-cadre-app\src\components\home\submit-pop.vue
-->
<script setup lang="ts">
import { getOther, getSubmit } from '@/api/home'
import { timeFormat } from '@/util/utils'

const props = defineProps({
  source: {
    type: Number,
    default: 0,
  },
  helpId: {
    default: null,
  },
})
const emit = defineEmits(['submitOk', 'onClose', 'onOpen'])
const popupRef = ref(null)
const filePickerRef = ref(null)

interface Ipage {
  createTime: string
  content: string
  urlList: string[]
  props: any
  imgs: string[]
}
const page = reactive<Ipage>({
  createTime: '',
  content: '',
  urlList: [],
  props: toRefs(props),
  imgs: [],
})
function open() {
  page.urlList = []
  filePickerRef.value?.clearFiles()
  page.content = ''
  popupRef.value?.open('bottom')
  page.createTime = timeFormat(Date.now())
}
function close() {
  page.urlList = []
  filePickerRef.value?.clearFiles()
  page.content = ''
  popupRef.value?.close()
}

async function onSubmit() {
  if (!page.content) {
    uni.showToast({ title: '请输入内容', icon: 'none' })
    return
  }
  const res = await getSubmit({
    helpId: page.props.helpId,
    content: page.content,
    urlList: page.urlList,
    source: null,
  })
  if (res.code === 200) {
    uni.showToast({ title: '提交成功', icon: 'success' })
    close()
    emit('submitOk')
  }
}

async function onCancel() {
  const res = await getOther({ helpId: page.props.helpId, flag: 1 })
  if (res.code === 200) {
    uni.showToast({ title: '提交成功', icon: 'success' })
    close()
    emit('submitOk')
  }
}
defineExpose({
  open,
  close,
})
</script>

<template>
  <uni-popup ref="popupRef" @mask-click="close">
    <view class="popup-content">
      <view class="popup_tj">
        <div class="clone" @click="close">
          <image src="@/static/images/home/clone@2x.png" mode="scaleToFill" />
        </div>
        <div class="txt_title">
          提交服务
        </div>
        <div class="txt_left">
          服务内容
        </div>
        <div class="data_val">
          <div class="date_">
            {{ page.createTime }}
          </div>
          <textarea
            id=""
            v-model="page.content"
            class="txt_domain"
            name=""
            placeholder="请输入服务内容......"
          />
        </div>
        <div class="img_upload">
          <bc-upload-img
            ref="filePickerRef"
            v-model="page.urlList"
            class="h-auto w-full"
          />
        </div>
        <div class="sub_box">
          <div class="integral">
            <div class="txt">
              可获得 :
            </div>
            <div class="fs">
              <div class="fs_num">
                {{ page.props.source }}
              </div>
              <div class="jf">
                积分
              </div>
            </div>
          </div>
          <div class="submit" @click="onSubmit">
            提交服务
          </div>
          <div class="cancel" @click="onCancel">
            放弃服务
          </div>
        </div>
      </view>
    </view>
  </uni-popup>
</template>

<style lang="scss" scoped>
.popup_tj {
  position: fixed; // 处理异形屏
  bottom: 0%;
  left: 0;
  right: 0;
  border-radius: 20rpx 20rpx 0 0;
  width: 750rpx;
  background: #ffffff;
  padding-bottom: 40rpx; // 安卓
  padding-bottom: constant(safe-area-inset-bottom); // iOS

  .clone {
    padding-top: 20rpx;
    position: relative;
    left: 90%;
    width: 100%;

    image {
      width: 30rpx;
      height: 30rpx;
    }
  }

  .txt_title {
    font-size: 45rpx;
    color: #029B00;
    text-align: center;
    padding-bottom: 58rpx;
  }

  .txt_left {
    margin: 0 55rpx;
    font-size: 33rpx;
    color: #666666;
  }

  .data_val {
    margin: 0 55rpx;
    color: #999;

    .date_ {
      padding-top: 35rpx;
      padding-bottom: 20rpx;
      font-size: 27rpx;
    }

    .txt_domain {
      font-size: 33rpx;
      width: 100%;
      display: block;
      font-size: 33rpx;
      height: 130rpx;
      color: #999;
    }
  }

  .img_upload {
    margin: 0 58rpx;
    margin-top: 35rpx;
    margin-bottom: 25rpx;
    display: flex;

    .scroll-Y {
      height: 220rpx;
    }
  }

  .sub_box {
    display: flex;
    align-items: center;
    padding: 0 40rpx;
    padding-bottom: 20rpx;

    .integral {
      flex: 3;

      .txt {
        font-size: 24rpx;
        color: #666666;
      }

      .fs {
        display: flex;
        text-align: left;
        color: #E73429;

        .fs_num {
          font-size: 49rpx;
          font-weight: bold;
        }

        .jf {
          padding-top: 22rpx;
          font-size: 24rpx;

        }
      }
    }

    .submit {
      flex: 4;
      width: 298rpx;
      height: 86rpx;
      background: #029B00;
      box-shadow: 0rpx 5rpx 1rpx 0rpx rgba(31, 142, 73, 0.14);
      border-radius: 39rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
    }

    .cancel {
      flex: 2;
      padding-left: 18rpx;
      color: #666666;
      font-size: 34rpx;
    }
  }
}
</style>
